<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import mapboxgl from 'mapbox-gl'

const props = defineProps({
  accessData: Object
})

const mapContainer = ref(null)
let map

onMounted(() => {
  mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN'
  
  map = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [116.397428, 39.90923], // 北京坐标
    zoom: 15
  })

  // 添加实时标记
  props.accessData.points.forEach(point => {
    new mapboxgl.Marker()
      .setLngLat([point.lng, point.lat])
      .addTo(map)
  })
})
</script>

<style scoped>
.map-container {
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
}
</style> 